<%@ page contentType="text/html;charset=UTF-8" %>
<%@ include file="/WEB-INF/views/include/taglib.jsp" %>
<html>
<head>
    <title>题目详情</title>
    <meta name="decorator" content="default"/>
    <script type="text/javascript">
        $(document).ready(function () {

        });
        function judge() {
            var answer = document.getElementById("answer").value;
            var userAnswer = document.getElementById("userAnswer").value;
            var answerSituation = document.getElementById("answerSituation").value;
            var ctfsubjectId = document.getElementById("ctfsubjectId").value;
            var ctfSetId = document.getElementById("ctfSetId").value;
            if (answer == userAnswer) {

                $("#answerSituation").html("已解答");
                $.ajax({
                    type: "POST",
                    url: "${ctx}/resource/resourceCtfSubject/saveAnswer",
                    data: {
                        answer: answer,
                        ctfsubjectId: ctfsubjectId
                    },
                    success: function () {
                        alertx("回答正确");
                        window.location.href = "${ctx}/resource/resourceCtfSubject/stuEnterCtfSetList?ctfSetId=${ctfSetId}";
                    },
                    error: function () {
                    }
                });

            } else {
                alertx("回答错误！");
            }


        }


        function judge1() {
            var answer = document.getElementById("answer").value;
            var userAnswer = document.getElementById("userAnswer").value;
            var answerSituation = document.getElementById("answerSituation").value;
            var judge = document.getElementById("judge").value;
            var user = document.getElementById("user").value;
            var userId = document.getElementById("userId").value;
            var paw = document.getElementById("paw").value;
            var repertoryId = document.getElementById("repertoryId").value;
            var scheduleId = document.getElementById("scheduleId").value;
            var subjectId = document.getElementById("subjectId").value;
            var resourceCtfSubject = document.getElementById("resourceCtfSubject").value;

            if (answer == userAnswer) {

                $("#answerSituation").html("已解答");
                $.ajax({
                    type: "POST",
                    url: "${ctxf}/race/raceLogin/flag",
                    data: {
                        flag: userAnswer,
                        usetID: userId,
                        repertoryId: repertoryId,
                        scheduleId: scheduleId,
                        subjectId: subjectId
                    },
                    success: function () {
                        alert("回答正确", function () {
                            document.getElementById("abcd").onclick = function () {
                                window.location.href = "${ctxf}/race/raceLogin/login?judge=" + judge  + "&repertoryId=" + repertoryId + "&scheduleId=" + scheduleId;
                            }
                        });
                    },
                    error: function () {
                    }
                });

            } else {
                alert("回答错误", function () {
                    document.getElementById("abcd").onclick = function () {
                        window.location.href = "${ctxf}/race/raceLogin/login?judge=" + judge  + "&repertoryId=" + repertoryId + "&scheduleId=" + scheduleId;
                    }
                });
            }
        }

        //		function GetRTime(endTime){
        ////			var endTime="2017/07/03 20:27:30";
        ////			var endTime=document.getElementById('endTime').value;
        //			var EndTime= new Date(endTime);
        //			var NowTime = new Date();
        //			var t =EndTime.getTime() - NowTime.getTime();
        //			var d=0;
        //			var h=0;
        //			var m=0;
        //			var s=0;
        //			if(t>=0){
        //				d=Math.floor(t/1000/60/60/24);
        //				h=Math.floor(t/1000/60/60%24);
        //				m=Math.floor(t/1000/60%60);
        //				s=Math.floor(t/1000%60);
        //			}else{
        //				var id=document.getElementById('sceneEnvironmentInstanceId').value;
        ////				var id="1234";
        //				clearInterval(auto);
        //				end(id);
        //			}
        //			if(d<10)
        //				d="0"+d;
        //			if(h<10)
        //				h="0"+h;
        //			if(m<10)
        //				m="0"+m;
        //			if(s<10)
        //				s="0"+s;
        ////			document.getElementById("t_d").innerHTML = d ;
        //			document.getElementById("t_h").innerHTML = h ;
        //			document.getElementById("t_m").innerHTML = m ;
        //			document.getElementById("t_s").innerHTML = s ;
        //
        //
        //
        //		}
        //		auto=setInterval(GetRTime('2017/07/03 20:27:30'),0);

        var auto;

        function addTime() {
            var addTimeNumber = document.getElementById("addTimeNumber").value;
            var increaseNumber = document.getElementById("increaseNumber").value;
//			alertx(parseInt(addTimeNumber)+" "+parseInt(increaseNumber));

            if (parseInt(addTimeNumber) >= parseInt(increaseNumber)) {
                $('#addTimeA').removeAttr('onclick');
                document.getElementById("addTimeA").style.color = "#909090";
                alertx("延长时间次数已用尽");
            } else {
                clearInterval(auto);
                var instanceId = document.getElementById("instanceId").value;
                var ctfEnvironmentId = document.getElementById("ctfEnvironmentId").value;
                $.ajax({
                    type: "POST",
                    url: "${ctxf}/race/raceLogin/addTime",
                    data: {
                        ctfEnvironmentId: ctfEnvironmentId,
                        instanceId: instanceId
                    },
                    success: function (endTime) {

                        var num = parseInt(addTimeNumber) + 1;

//						alertx("endTime="+endTime+" num="+num);
                        document.getElementById("addTimeNumber").value = num;
                        document.getElementById("environmentEndTime").value = endTime;
                        GetRTime_addTime();
                        auto = setInterval(GetRTime_addTime, 0);
                    },
                    error: function () {

                        alertx("延长时间失败");

                    }
                });

            }


//			document.getElementById("environmentEndTime").value="2017/07/03 20:27:30";
//			GetRTime_addTime();
//			auto=setInterval(GetRTime_addTime,0);
        }
        function GetRTime_addTime() {
            var endTime = document.getElementById("environmentEndTime").value;
            var EndTime = new Date(endTime);
            var NowTime = new Date();
            var t = EndTime.getTime() - NowTime.getTime();
            var d = 0;
            var h = 0;
            var m = 0;
            var s = 0;
            if (t >= 0) {
                d = Math.floor(t / 1000 / 60 / 60 / 24);
                h = Math.floor(t / 1000 / 60 / 60 % 24);
                m = Math.floor(t / 1000 / 60 % 60);
                s = Math.floor(t / 1000 % 60);
            } else {
//							var id=document.getElementById('sceneEnvironmentInstanceId').value;
                clearInterval(auto);
                end1();
            }
            if (d < 10)
                d = "0" + d;
            if (h < 10)
                h = "0" + h;
            if (m < 10)
                m = "0" + m;
            if (s < 10)
                s = "0" + s;
//			document.getElementById("t_d").innerHTML = d ;
            document.getElementById("t_h").innerHTML = h;
            document.getElementById("t_m").innerHTML = m;
            document.getElementById("t_s").innerHTML = s;


        }

        function aa(ctfEnvironmentId) {
//			var s = window.parent.document.getElementById("raceMaskDIV");
//			s.style.display = "block";

            $.ajax({
                type: "POST",
                url: "${ctxf}/race/raceLogin/createCtfInstance",
                data: {
                    ctfEnvironmentId: ctfEnvironmentId
                },
                success: function (list) {

//					var s = window.parent.document.getElementById("raceMaskDIV");
//					s.style.display = "none";
                    $("#raceDiv").show();
                    $('#crateRaceA').removeAttr('onclick');
                    document.getElementById("crateRaceA").style.color = "#909090";
                    console.info(list[1] + " " + list[0]);
                    document.getElementById("link").innerHTML = list[1];
                    document.getElementById("link").href = list[1];
                    document.getElementById("instanceId").value = list[2];
                    function GetRTime() {
                        var endTime = list[0];
//			var endTime=document.getElementById('endTime').value;
                        var EndTime = new Date(endTime);
                        var NowTime = new Date();
                        var t = EndTime.getTime() - NowTime.getTime();
                        var d = 0;
                        var h = 0;
                        var m = 0;
                        var s = 0;
                        if (t >= 0) {
                            d = Math.floor(t / 1000 / 60 / 60 / 24);
                            h = Math.floor(t / 1000 / 60 / 60 % 24);
                            m = Math.floor(t / 1000 / 60 % 60);
                            s = Math.floor(t / 1000 % 60);
                        } else {
//							var id=document.getElementById('sceneEnvironmentInstanceId').value;
                            clearInterval(auto);
                            end();
                        }
                        if (d < 10)
                            d = "0" + d;
                        if (h < 10)
                            h = "0" + h;
                        if (m < 10)
                            m = "0" + m;
                        if (s < 10)
                            s = "0" + s;
//			document.getElementById("t_d").innerHTML = d ;
                        document.getElementById("t_h").innerHTML = h;
                        document.getElementById("t_m").innerHTML = m;
                        document.getElementById("t_s").innerHTML = s;


                    }

                    auto = setInterval(GetRTime, 0);
                },
                error: function () {
//					var s = window.parent.document.getElementById("raceMaskDIV");
//					s.style.display = "none";
                    alertx("创建赛题失败");

                }
            });

        }
        function end1(id) {
            $("#raceDiv").hide();
            alert("实验时间已结束！");
        }
        function end(id) {

            $("#raceDiv").hide();
            alert("实验时间已结束！");
            <%--var s = window.parent.document.getElementById("maskDIVDelete");--%>
            <%--s.style.display = "block";--%>
            <%--$.ajax({--%>
            <%--type: "POST",--%>
            <%--url: "${ctx}/scene/sceneEnvironmentInstance/endExperiment",--%>
            <%--data: {--%>
            <%--instanceId:id--%>
            <%--},--%>
            <%--success: function () {--%>
            <%--var s = window.parent.document.getElementById("maskDIVDelete");--%>
            <%--s.style.display = "none";--%>
            <%--//						window.history.go(-1);--%>
            <%--window.opener=null;window.open('','_self');window.close();--%>
            <%--},--%>
            <%--error:function(){--%>
            <%--var s = window.parent.document.getElementById("maskDIVDelete");--%>
            <%--s.style.display = "none";--%>
            <%--alert("未能结束实验");--%>
            <%--}--%>
            <%--});--%>

        }
    </script>
    <link rel="stylesheet" href="${ctx}/css/pdf/bootstrap.min.css">
    <style>
        #pdf {
            height: 800px;
        }

        #time {
            color: #97530e;
        }

        #msg {
            height: 2rem;
            text-align: center;
            position: fixed;
            top: 50%;
            margin-top: -1rem;
            line-height: 2rem;
            width: 100%;
        }

        #msg span {
            color: #fff;
            background: rgba(0, 0, 0, 0.6);
            height: 2rem;
            display: inline-block;
            padding: 0 3rem;
            border-radius: 5px;
        }


        /*#raceDIV {width:100%;height:100%;position:absolute;top:0;left:0;z-index:1;opacity:0.3;*/
        /*/!*兼容IE8及以下版本浏览器*!/*/
        /*filter: alpha(opacity=30);display:none;*/
        /*bottom: 0;*/
        /*background-color: #393939}*/
    </style>
    <script src="http://www.lanrenzhijia.com/ajaxjs/pdfobject.js"></script>
    <script>
        window.onload = function () {
            <%--var myPDF = new PDFObject({url: "${resourceCtfSubject.solution}"}).embed("pdf");--%>
        };
    </script>
</head>
<>
<ul class="nav nav-tabs">
    <%--<li><a href="${ctx}/resource/resourceCtfSet/stuCtfSetList/">CTF题目集列表</a></li>--%>
    <li class="active"><a
            >题目详情</a>
    </li>
</ul>
<br/>
<form:form id="inputForm" modelAttribute="resourceCtfSubject" action="#" method="post" class="form-horizontal">

    <input type="hidden" value="${judge}" name="judge" id="judge">
    <input type="hidden" value="${user}" name="user" id="user">
    <input type="hidden" value="${paw}" name="paw" id="paw">
    <input type="hidden" value="${repertoryId}" name="repertoryId" id="repertoryId">
    <input type="hidden" value="${scheduleId}" name="scheduleId" id="scheduleId">
    <input type="hidden" value="${subjectId}" name="subjectId" id="subjectId">
    <input type="hidden" value="${resourceCtfSubject}" name="resourceCtfSubject" id="resourceCtfSubject">
    <input type="hidden" value="${userId}" name="userId" id="userId">


    <form:hidden path="id"/>
    <sys:message content="${message}"/>
    <div class="control-group">
        <label class="control-label">分值：</label>

        <div class="controls">
            <label class="lbl">${resourceCtfSubject.score}</label>
        </div>
    </div>
    <div class="control-group">
        <label class="control-label">类型：</label>

        <div class="controls">
            <label class="lbl">${resourceCtfSubject.ctfSubjectTypeId}</label>
        </div>
    </div>
    <div class="control-group">
        <label class="control-label">答题情况：</label>

        <div class="controls">
            <label class="lbl" id="answerSituation" name="answerSituation">
                <c:choose>
                    <c:when test="${isAnswered=='false'}">
                        未解答
                    </c:when>
                    <c:otherwise>
                        已解答
                    </c:otherwise>
                </c:choose>
            </label>
        </div>
    </div>
    <div class="control-group">
        <label class="control-label">题目：</label>

        <div class="controls">
            <label class="lbl">${resourceCtfSubject.ctfSubjectName}</label>
        </div>
    </div>
    <c:if test="${resourceCtfSubject.attachment!=null&&resourceCtfSubject.attachment!=''}">
        <div class="control-group">
            <div class="controls">
                <a href="${ctxf}/race/raceLogin/downloadDocFiles?ctfSubjectId=${resourceCtfSubject.id}">点击下载附件</a>
            </div>
        </div>
    </c:if>

    <c:set var="ctfEnvironmentId" value="${resourceCtfSubject.ctfEnvironmentId}"/>
    <c:set var="tip" value="${tip}"/>

    <c:if test="${not empty ctfEnvironmentId}">
        <c:choose>
            <c:when test="${not empty tip}">
                <div class="control-group">
                    <label class="control-label">提示：</label>

                    <div class="controls">
                        <label>${tip}<label/>
                    </div>
                </div>
            </c:when>
            <c:otherwise>
                <div class="control-group">
                    <div class="controls">
                        <a href="#" class="crateRaceA" id="crateRaceA" name="crateRaceA"
                           onclick="aa('${resourceCtfSubject.ctfEnvironmentId}')">点击创建赛题</a>
                    </div>
                </div>
            </c:otherwise>
        </c:choose>

    </c:if>
    <div id="raceDiv" hidden>
        <div class="control-group">
            <div class="controls">
                <a href="#" id="link" target="_blank" style="color: red"></a>
                    <%--<a href="${ctx}/resource/resourceCtfSubject/lookSolution?ctfSubjectId=${resourceCtfSubject.id}" target="_blank">查看解题思路</a>--%>
            </div>
            <div class="controls">
                <lable id="time">  
                      <span id="t_h">00</span>时
                        <span id="t_m">00</span>分
                        <span id="t_s">00</span>秒
                </lable>


            </div>
            <c:if test="${not empty increaseNumber}">
                <div class="controls">
                    <a href="#" class="addTimeA" id="addTimeA" name="addTimeA" onclick="addTime()">延长时间(${increaseTime}分钟/${increaseNumber}次)</a>
                </div>
            </c:if>

        </div>
    </div>
    <c:if test="${resourceCtfSubject.solution!=null&&resourceCtfSubject.solution!=''}">
        <div class="control-group">
            <div class="controls">
                <button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
                    查看解题思路
                </button>
                    <%--<a href="${ctx}/resource/resourceCtfSubject/lookSolution?ctfSubjectId=${resourceCtfSubject.id}" target="_blank">查看解题思路</a>--%>
            </div>
        </div>
    </c:if>
    <input type="hidden" id="instanceId" name="instanceId">
    <input type="hidden" id="ctfEnvironmentId" name="ctfEnvironmentId" value="${resourceCtfSubject.ctfEnvironmentId}">
    <input type="hidden" id="ctfsubjectId" name="ctfsubjectId" value="${resourceCtfSubject.id}">
    <input type="hidden" id="ctfSetId" name="ctfSetId" value="${ctfSetId}">
    <input type="hidden" id="environmentEndTime" name="environmentEndTime">
    <input type="hidden" id="increaseTime" name="increaseTime" value="${increaseTime}">
    <input type="hidden" id="addTimeNumber" name="addTimeNumber" value="0">
    <input type="hidden" id="increaseNumber" name="increaseNumber" value="${increaseNumber}">

    <input type="hidden" id="answer" name="answer" value="${resourceCtfSubject.answer}">

    <div class="control-group">
        <label class="control-label">Flag：</label>

        <div class="controls">
            <input type="text" name="userAnswer" id="userAnswer" htmlEscape="false" maxlength="100"
                   class="input-xlarge required"/>
        </div>
    </div>
    <%--<div class="control-group">--%>
    <%--<label class="control-label">解题思路：</label>--%>
    <%--<div class="controls">--%>
    <%--<form:textarea path="solution" htmlEscape="false" rows="4" maxlength="255" class="input-xxlarge" readonly="true"/>--%>
    <%--</div>--%>
    <%--</div>--%>
    <div class="form-actions">
        <input id="btnSubmit" class="btn btn-primary" type="button" value="提 交" onclick="judge1()"/>&nbsp;
        <input id="btnCancel" class="btn" type="button" value="返 回" onclick="history.go(-1)"/>
    </div>
</form:form>

<!-- Modal -->
<div class="modal fade bs-example-modal-lg" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog modal-lg" role="document">
        <div class="modal-content">
            <div class="modal-body">
                <div class="col-lg-pull-12" id="pdf"></div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                <button type="button" class="btn btn-primary">Save changes</button>
            </div>
        </div>
    </div>
</div>
<script src="http://cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script>
<script src="http://cdn.bootcss.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<%--<div id='raceDIV'><i class='icon-spinner icon-spin white' style='font-size:550%;position: relative;top: 47%;left: 48%;'></i>" +--%>

<%--"<span style='position: relative;color: white;top: 50%;left:39%;font-size:20px;'>创建赛题中...</span></div>--%>

<script>
    window.alert = function (str, callback) {
        var shield = document.createElement("DIV");
        shield.id = "shield";
        shield.style.position = "absolute";
        shield.style.left = "0px";
        shield.style.top = "0px";
        shield.style.width = "100%";
        shield.style.height = document.body.scrollHeight + "px";
//弹出对话框时的背景颜色
//        shield.style.background = "#fff";
        shield.style.textAlign = "center";
        shield.style.zIndex = "25";
//背景透明 IE有效
        shield.style.filter = "alpha(opacity=0)";
        var alertFram = document.createElement("DIV");
        alertFram.id = "alertFram";
        alertFram.style.position = "absolute";
        alertFram.style.left = "50%";
        alertFram.style.top = "50%";
        alertFram.style.marginLeft = "-225px";
        alertFram.style.marginTop = "-75px";
        alertFram.style.width = "450px";
        alertFram.style.height = "150px";
        alertFram.style.background = "#ff0000";
        alertFram.style.textAlign = "center";
        alertFram.style.lineHeight = "150px";
        alertFram.style.zIndex = "300";
        strHtml = "<ul style=\"list-style:none;margin:0px;padding:0px;width:100%\">\n";
        strHtml += " <li style=\"background:#DD828D;text-align:left;padding-left:20px;font-size:14px;font-weight:bold;height:25px;line-height:25px;border:1px solid #F9CADE;\">温馨提示</li>\n";
        strHtml += " <li style=\"background:#fff;text-align:center;font-size:20px;height:120px;line-height:120px;border-left:1px solid #F9CADE;border-right:1px solid #F9CADE;\">" + str + "</li>\n";
        strHtml += " <li style=\"background:#FDEEF4;text-align:center;font-weight:bold;height:25px;line-height:25px; border:1px solid #F9CADE;\">" +
                "<input type=\"button\" id=\"abcd\" value=\"确 定\"  /></li>\n";
        strHtml += "</ul>\n";
        alertFram.innerHTML = strHtml;
        document.body.appendChild(alertFram);
        document.body.appendChild(shield);
        if (callback != undefined)
            callback();
//        var ad = setInterval("doAlpha()",5);
        alertFram.focus();
        document.body.onselectstart = function () {
            return false;
        };
    }
</script>
</body>
</html>